import React, {useImperativeHandle, useState} from 'react'
import {ColumnType, DataSourceType} from "../DataType";
import {Table, Tooltip} from 'antd'
import './style.less'
import {isEmptyObj} from "../../../../util/typeUitl";
import {http} from "../../../../util/httpService";
import {getTableStyle} from '../../../../util/listPageUtil'
import moment from 'moment'

/**
 * 数据表格组件
 * @param tableApi: 非必填 接口配置
 * @param columns: 必填 列表标题列数据
 * @param dataSource: 非必填 表格数据
 * @param dataSourceConfig?: 非必填 数据表格组件<Table/>拓展参数
 * @param componentConfig?: 非必填 数据表格逻辑功能开关配置项
 * @constructor
 */
function DataSource(props: DataSourceType) {
    const {columns, dataSource, tableApi, dataSourceConfig, cRef} = props
    const [col, setCol] = useState([]);                                         //表格标题列
    const [source, setSource] = useState<Array<object>>([]);                    //表格数据列
    const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');
    const [selectKeys, setSelectKeys] = useState([]);
    const [selectRows, setSelectRows] = useState([]);
    const [tableConfig, setTableConfig] = useState({                            //表格配置列
        size: 'small',
        bordered: true,
        pagination: {
            current: 1,
            pageSize: 20,
            total: 100
        },
        ...dataSourceConfig
    });

    useImperativeHandle(cRef, () => ({
        selectKeys,
        selectRows,
    }))


    React.useEffect(() => {
        if (dataSource && dataSource.length > 0) {
            setSource(dataSource)
        } else if (!isEmptyObj(tableApi)) {
            getSource(tableApi)
        }
        setColumns(columns)
    }, [])

    const setColumns = (col: ColumnType) => {
        const columns: Array<object> = col.map(item => {
            if (item.type) {
                item.render = (value) => {
                    const date = moment(value).format(item.type.moment)
                    return <Tooltip title={date}>
                        <div>{date}</div>
                    </Tooltip>
                }
            } else {
                item.render = (value) => {
                    return <Tooltip title={value}>
                        <div>{value}</div>
                    </Tooltip>
                }
            }
            return item
        })
        autoColumnsWidth(columns)
        setCol(columns)
    }

    const autoColumnsWidth = (col) => {
        // const columns: Array = col.map(item => {
        //     item.width = item.width || autoWidth(item)
        //     return item
        // })
        const tableScroll = getTableStyle(col, 300)
        const config = Object.assign(tableConfig, {scroll: tableScroll})
        console.log(config)
        setTableConfig(config)
    }

    const getSource = async (tableApi) => {
        const
            {
                url, type, isApi = true, params = {}
            }
                = tableApi
        const res = (await http(url, params, isApi, type)).data.data
        setSource(res)
    }

    const rowSelection = {
        onChange: (selectedRowKeys: [], selectedRows: []) => {
            setSelectKeys(selectedRowKeys)
            setSelectRows(selectedRows)
        }
    };

    return (
        <div
            className={'dataSourceView'}>
            <Table
                {...tableConfig}
                columns={col}
                dataSource={source}
                rowSelection={{
                    type: selectionType,
                    ...rowSelection,
                }}
            />
        </div>
    )
}

export default DataSource